<template>
    <div class="container">
        <el-input v-model="input" @change="onSearch" style="width: 340px" :placeholder="placeholder">
            <template #prepend>
                <el-select v-model="select" placeholder="Select" style="width: 100px">
                    <el-option label="标题" value="标题" />
                    <el-option label="描述" value="描述" />
                    <el-option label="标签" value="标签" />
                </el-select>
            </template>
            <template #append>
                <el-button :icon="Search" />

            </template>
        </el-input>
        <div class="project">
            <div class="project-item" v-for="item in projectlist" @click="gopage(item)">
                <img :src="getImageUrl(item.img)" alt="">
                <div class="projectname">{{ item.projectname }}</div>
                <div class="desc">{{ item.desc }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
const getImageUrl = (projectname: any) => {
    console.log(new URL(`../../assets/image/${projectname}`, import.meta.url).href);
    //new URL 会把 @ 当作普通字符处理,
    //@ 是 Vue 项目里 Webpack 或 Vite 等构建工具定义的路径别名
    // new URL 是 JavaScript 原生 API，它无法识别 @ 这样的路径别名
    return new URL(`../../assets/image/${projectname}`, import.meta.url).href
}
const select = ref('标题')
const placeholder = ref('按标题搜索')

watch(select, (newVal, oldVal) => {
    placeholder.value = '按' + newVal + '搜索'
})
const gopage = (item: any) => {
    window.open(item.projecturl)
}
const temp = ref([{
    projectname: '智能家居',
    img: '智能家居.png',
    desc: '拿three做的，智能家居演示demo',
    projecturl: 'http://111.229.148.175:5173/'
}, {
    projectname: '量子纠缠',
    img: '量子纠缠.jpg',
    projecturl: 'http://111.229.148.175:5174/',
    desc: '利用localstorage通讯，不同窗口方块之间连线'
}])
const projectlist = ref([])
onMounted(() => {
    projectlist.value = JSON.parse(JSON.stringify(temp.value))
})
const input = ref('')
const onSearch = () => {
    console.log(projectlist.value);

    if (input.value) {
        if (select.value === '标题') {
            projectlist.value = projectlist.value.filter(item => item.projectname.includes(input.value))
        } else if (select.value === '描述') {
            projectlist.value = projectlist.value.filter(item => item.desc.includes(input.value))
        } else if (select.value === '标签') {
            projectlist.value = projectlist.value.filter(item => item.desc.includes(input.value))
        }
    } else {
        projectlist.value = JSON.parse(JSON.stringify(temp.value))
    }
}
</script>

<style lang="scss" scoped>
@import './index.scss'
</style>